const VueRouter = require('vue-router');
/**
 1. 定义路由组件.
    也可以从其他文件导入
    const Home = { template: '<div>Home</div>' }
    const About = { template: '<div>About</div>' }
 */

import Home from './components/demo/home.vue';
import About from './components/demo/about.vue';
import NotFound from './components/demo/404.vue';
import homeChildren from './components/demo/children/homeChildren.vue';
import aboutChildren from './components/demo/children/aboutChildren.vue';

/*
    2. 定义一些路由
    每个路由都需要映射到一个组件。
    我们后面再讨论嵌套路由。
*/
const routes = [
  // 匹配 /zhangsan
  { 
    name: 'home'
    ,path: '/:username'
    ,component: Home 
    ,children: [
      {
        /*
            当 /home/:id/homeChildren 匹配成功
            homeChildren 将被渲染到 home 的 <router-view> 内部
        */
        path: 'homeChildren'
        ,component: homeChildren
      }
      ,{
        path: 'aboutChildren'
        ,component: aboutChildren
      }
    ]
  }
  ,{
    path: '/about/:username'
    ,component: About 
  }
  // 将匹配所有内容并将其放在 `$route.params.pathMatch` 下
  ,{ 
    path: '/:pathMatch(.*)*'
    ,name: 'NotFound'
    ,component: NotFound 
  }
  // 将匹配以 `/user-` 开头的所有内容，并将其放在 `$route.params.afterUser` 下
  // ,{ path: '/user-:afterUser(.*)', component: UserGeneric }
]

/*
3. 创建路由实例并传递 `routes` 配置
    你可以在这里输入更多的配置，但我们在这里暂时保持简单
*/ 
const router = VueRouter.createRouter({
  // 4. 内部提供了 history 模式的实现。为了简单起见，我们在这里使用 hash 模式。
  history: VueRouter.createWebHashHistory()
  ,routes // `routes: routes` 的缩写
})

export default router;


/*  嵌套路由

/user/johnny/profile                     /user/johnny/posts
+------------------+                  +-----------------+
| User             |                  | User            |
| +--------------+ |                  | +-------------+ |
| | Profile      | |  +------------>  | | Posts       | |
| |              | |                  | |             | |
| +--------------+ |                  | +-------------+ |
+------------------+                  +-----------------+

*/

